<script setup lang="ts">
import { envConfig } from './config'
import { asyncLoadScript } from './utils/script'
import useSystem from '@/hooks/useSystem'
// import {sendThirdAppMessage} from '@/utils/system'
const { execute } = useSystem()
const route = useRoute() as any
const router = useRouter()
import { ref, provide } from 'vue';


const transitionName = ref('')

const includeList = ref([] as any)

const showBar = ref<boolean>(false)

watch(route, (v) => {
    //监听路由变化，把配置路由中keepAlive为true的name添加到include动态数组中
    if (v.meta.keepAlive && includeList.value.indexOf(v.name) === -1) {
        includeList.value.push(v.name)
    }
    // showBar.value = (route?.name != 'login' && route?.name != 'index' && route?.name != 'my' && route?.name != 'EMR' && route?.name != 'bindClient' && route?.name != 'bindClientHH' && route?.name != 'myInterest')
    showBar.value = true;
    //设置全局
    provide('showBar', showBar);
})
//设置全局
provide('showBar', showBar.value);
onMounted(() => {
    if (envConfig.env != 'production') {
        asyncLoadScript(this, { src: 'https://cdn.jsdelivr.net/npm/eruda', id: 'debug' }).then(
            () => {
                window.eruda.init()
            }
        )
    }
})
router.beforeEach((to: any, from: any) => {
    if (!to.meta.transition.enable) {
        transitionName.value = ''
    } else {
        if (to.meta.transition.name) {
            transitionName.value = to.meta.transition.name
        } else if (to.meta.index > from.meta.index) {
            transitionName.value = 'van-slide-left'
        } else if (to.meta.index < from.meta.index) {
            transitionName.value = 'van-slide-right'
        }
    }
})

// onMounted(() => {
//
// })

</script>

<template>
    <!-- 其他内容 -->
    <child-component></child-component>
    <div class="fix-iphone" :class="showBar ? 'layout-content' : 'layout-content-no-bar'">
        <router-view v-slot="{ Component }">
            <transition :name="transitionName || ''">
                <keep-alive :include="includeList">
                    <div>
                        <van-nav-bar v-if="showBar" :title="route.meta.title" left-arrow
                            @click-left="() => router.back()" :fixed="true" />
                        <component :is="Component" />
                    </div>
                </keep-alive>
            </transition>
        </router-view>
        <!-- <van-back-top bottom="15vh" /> -->
    </div>
</template>
<style lang="scss" scoped>
.layout-content {
    width: 100vw;
    min-height: calc(100vh - 92px) !important;
    padding-top: 92px !important;
}

.layout-content-no-bar {
    width: 100vw;
    height: calc(100vh) !important;
}

:deep(.van-field__label) {
    color: #76797C !important;
}

:deep(.van-field__error-message) {
    text-align: right;
}

:deep(.van-button--primary) {
    border: none;
}

:deep(.van-nav-bar .van-icon) {
    font-size: 34px;
    color: #000000 !important;
}
</style>
